<template>
  <div class="teleport-demo">
    <h2>Vue 3 Teleport 功能</h2>
    
    <div class="teleport-features">
      <!-- Teleport 基础示例 -->
      <div class="feature-card">
        <h3>🚀 Teleport 基础</h3>
        <div class="content">
          <p>Teleport 允许我们将组件的内容渲染到 DOM 中的其他位置，而不受父组件样式的影响。</p>
          <div class="demo">
            <div class="container-with-overflow">
              <p>这个容器有 overflow: hidden 样式</p>
              <button @click="showModal = true" class="btn-primary">
                打开模态框
              </button>
              
              <!-- 这个模态框会被渲染到 body 标签下 -->
              <Teleport to="body">
                <div v-if="showModal" class="modal-overlay" @click.self="showModal = false">
                  <div class="modal-content">
                    <h3>模态框标题</h3>
                    <p>这个模态框内容虽然在父组件的模板中定义，但实际上会被渲染到 body 标签下，不受父容器 overflow 限制。</p>
                    <button @click="showModal = false" class="btn-secondary">
                      关闭模态框
                    </button>
                  </div>
                </div>
              </Teleport>
            </div>
            <div class="code-block">
              <CodeBlock :code="teleportBasicCode" language="html"></CodeBlock>
            </div>
          </div>
        </div>
      </div>

      <!-- 多目标 Teleport -->
      <div class="feature-card">
        <h3>🎯 多目标 Teleport</h3>
        <div class="content">
          <p>Teleport 可以根据条件渲染到不同的目标位置。</p>
          <div class="demo">
            <div class="target-selector">
              <label>选择渲染目标：</label>
              <select v-model="targetElement" class="select-field">
                <option value="body">body</option>
                <option value="#target-1">#target-1</option>
                <option value="#target-2">#target-2</option>
              </select>
              <button @click="showNotification = true" class="btn-primary">
                显示通知
              </button>
            </div>
            
            <!-- 目标容器 -->
            <div class="target-containers">
              <div id="target-1" class="target-box">
                <h4>目标容器 1</h4>
              </div>
              <div id="target-2" class="target-box">
                <h4>目标容器 2</h4>
              </div>
            </div>
            
            <!-- 条件 Teleport -->
            <Teleport :to="targetElement">
              <div v-if="showNotification" class="notification">
                <p>这是一条通知信息</p>
                <button @click="showNotification = false" class="close-btn">×</button>
              </div>
            </Teleport>
            
            <div class="code-block">
              <CodeBlock :code="teleportDynamicCode" language="html"></CodeBlock>
            </div>
          </div>
        </div>
      </div>

      <!-- 嵌套 Teleport -->
      <div class="feature-card">
        <h3>🔄 嵌套 Teleport</h3>
        <div class="content">
          <p>Teleport 可以嵌套使用，实现复杂的渲染逻辑。</p>
          <div class="demo">
            <button @click="showNestedModal = true" class="btn-primary">
              打开嵌套模态框
            </button>
            
            <!-- 外层模态框 -->
            <Teleport to="body">
              <div v-if="showNestedModal" class="modal-overlay" @click.self="showNestedModal = false">
                <div class="modal-content nested-modal-1">
                  <h3>外层模态框</h3>
                  <p>这是外层模态框的内容</p>
                  <button @click="showInnerModal = true" class="btn-primary">
                    打开内层模态框
                  </button>
                  <button @click="showNestedModal = false" class="btn-secondary">
                    关闭外层
                  </button>
                </div>
              </div>
            </Teleport>
            
            <!-- 内层模态框 -->
            <Teleport to="body">
              <div v-if="showInnerModal" class="modal-overlay" @click.self="closeInnerModal">
                <div class="modal-content nested-modal-2">
                  <h3>内层模态框</h3>
                  <p>这是内层模态框的内容，两个模态框都渲染到了 body 下</p>
                  <button @click="closeInnerModal" class="btn-secondary">
                    关闭内层
                  </button>
                </div>
              </div>
            </Teleport>
            
            <div class="code-block">
              <CodeBlock :code="teleportNestedCode" language="html"></CodeBlock>
            </div>
          </div>
        </div>
      </div>

      <!-- 实际应用场景 -->
      <div class="feature-card">
        <h3>💡 实际应用场景</h3>
        <div class="content">
          <p>Teleport 在实际开发中的常见应用场景。</p>
          <div class="demo">
            <div class="practical-examples">
              <div class="example">
                <h4>1. 全局通知系统</h4>
                <button @click="showToast = true" class="btn-primary">
                  显示提示消息
                </button>
                <Teleport to="body">
                  <transition name="toast">
                    <div v-if="showToast" class="toast">
                      操作成功！
                    </div>
                  </transition>
                </Teleport>
              </div>
              
              <div class="example">
                <h4>2. 右键菜单</h4>
                <div 
                  class="context-menu-area" 
                  @contextmenu.prevent="showContextMenu($event)"
                >
                  在此区域右键点击显示菜单
                </div>
                <Teleport to="body">
                  <div 
                    v-if="contextMenuVisible" 
                    class="context-menu"
                    :style="{ top: contextMenuY + 'px', left: contextMenuX + 'px' }"
                    @click.stop
                  >
                    <div class="menu-item">复制</div>
                    <div class="menu-item">粘贴</div>
                    <div class="menu-item">剪切</div>
                    <div class="menu-item">删除</div>
                  </div>
                </Teleport>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import CodeBlock from '@components/CodeBlock.vue'

// 基础 Teleport 示例
const showModal = ref(false)

// 动态目标 Teleport
const showNotification = ref(false)
const targetElement = ref('body')

// 嵌套 Teleport
const showNestedModal = ref(false)
const showInnerModal = ref(false)
const closeInnerModal = () => {
  showInnerModal.value = false
}

// 实际应用场景
const showToast = ref(false)
const contextMenuVisible = ref(false)
const contextMenuX = ref(0)
const contextMenuY = ref(0)

// 显示右键菜单
const showContextMenu = (event) => {
  contextMenuX.value = event.clientX
  contextMenuY.value = event.clientY
  contextMenuVisible.value = true
}

// 点击其他地方关闭右键菜单
const handleClickOutside = () => {
  contextMenuVisible.value = false
}

// 自动关闭 Toast
const autoHideToast = () => {
  if (showToast.value) {
    setTimeout(() => {
      showToast.value = false
    }, 3000)
  }
}

// 监听 Toast 变化
showToast.value = false
const watchToast = () => {
  if (showToast.value) {
    autoHideToast()
  }
}

// 生命周期钩子
onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})

// 代码示例
const teleportBasicCode = `<Teleport to="body">
  <div v-if="showModal" class="modal-overlay">
    <div class="modal-content">
      <h3>模态框标题</h3>
      <p>模态框内容</p>
      <button @click="showModal = false">关闭</button>
    </div>
  </div>
</Teleport>`

const teleportDynamicCode = `<select v-model="targetElement">
  <option value="body">body</option>
  <option value="#target-1">#target-1</option>
  <option value="#target-2">#target-2</option>
</select>

<Teleport :to="targetElement">
  <div v-if="showNotification" class="notification">
    这是一条通知
  </div>
</Teleport>`

const teleportNestedCode = `<!-- 外层模态框 -->
<Teleport to="body">
  <div v-if="showNestedModal" class="modal-overlay">
    <div class="modal-content">
      <h3>外层模态框</h3>
      <button @click="showInnerModal = true">打开内层</button>
    </div>
  </div>
</Teleport>

<!-- 内层模态框 -->
<Teleport to="body">
  <div v-if="showInnerModal" class="modal-overlay">
    <div class="modal-content">
      <h3>内层模态框</h3>
    </div>
  </div>
</Teleport>`

// 监听 showToast 变化
const unwatch = () => {
  if (showToast.value) {
    autoHideToast()
  }
}
</script>

<style scoped>
.teleport-demo {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.teleport-demo h2 {
  color: #3b82f6;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.teleport-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.feature-card h3 {
  background: linear-gradient(135deg, #ec4899, #f472b6);
  color: white;
  margin: 0;
  padding: 1rem;
  font-size: 1.25rem;
}

.content {
  padding: 1.5rem;
}

.content p {
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.demo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.btn-primary {
  background: #ec4899;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background: #db2777;
}

.btn-secondary {
  background: #64748b;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.btn-secondary:hover {
  background: #475569;
}

.container-with-overflow {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.code-block {
  background: #1e293b;
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
}

.code-block code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875rem;
  color: #e2e8f0;
  line-height: 1.5;
}

.target-selector {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.select-field {
  padding: 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 1rem;
}

.target-containers {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.target-box {
  flex: 1;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  padding: 1rem;
  min-height: 100px;
  position: relative;
}

.target-box h4 {
  margin-top: 0;
  color: #334155;
}

/* 全局样式 - 实际项目中应该放在全局样式文件中 */
:global(.modal-overlay) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

:global(.modal-content) {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

:global(.modal-content h3) {
  margin-top: 0;
  color: #1f2937;
}

:global(.nested-modal-1) {
  z-index: 1001;
}

:global(.nested-modal-2) {
  z-index: 1002;
  transform: scale(0.9);
}

:global(.notification) {
  background: #10b981;
  color: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  position: relative;
  margin-bottom: 1rem;
}

:global(.notification .close-btn) {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

:global(.notification .close-btn:hover) {
  background: rgba(255, 255, 255, 0.2);
}

:global(.toast) {
  position: fixed;
  top: 2rem;
  right: 2rem;
  background: #10b981;
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 2000;
}

:global(.toast-enter-active),
:global(.toast-leave-active) {
  transition: all 0.3s ease;
}

:global(.toast-enter-from),
:global(.toast-leave-to) {
  opacity: 0;
  transform: translateX(100%);
}

.context-menu-area {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
}

:global(.context-menu) {
  position: fixed;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 1500;
  min-width: 150px;
}

:global(.menu-item) {
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

:global(.menu-item:hover) {
  background: #f8fafc;
}

.practical-examples {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.example {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.example h4 {
  margin: 0;
  color: #334155;
  font-size: 1rem;
}

@media (max-width: 768px) {
  .teleport-demo {
    padding: 1rem;
  }
  
  .teleport-features {
    grid-template-columns: 1fr;
  }
  
  .teleport-demo h2 {
    font-size: 1.75rem;
  }
  
  .target-containers {
    flex-direction: column;
  }
}
</style>